<script setup lang="ts">
import { reactive } from 'vue';
import { DICT_EDGES,DICT_LAYOUT, importBtn, exportBtn } from "../util"
import { IPackAntvX6 } from '../inter';
import {t} from "../i18n/index"

const props = defineProps<IPackAntvX6.ToolbarProps>();
//
const { minimap, menu, nodelist, drawer, contextmenu, isFold, main, mousepos, module, enabled } = props;
//
const c = main.graph.config
const handleEdgeChange = (n: number) => {
    c.edge = n;
    main.graph.saveConfig().reset();
}
//
const searchResults = reactive<{ id: string, label: string, icon?: string }[]>([])
const handleSearch = (e: any) => {
    const v = e.target.value;
    searchResults.length = 0;
    if (v) {
        const es = main.graph.search(v)
        searchResults.push(...es.map((e: any) => ({ id: e.id, label: e?.label || e.prop('label'), icon: e.prop('icon') || e.attr('icon')?.class || '' })))
    }
}

const handleCenterCell = (id: string) => {
    main.graph.startAnimate().centerCell(main.graph.getCellById(id))
}

// const handleFullScreen = () => {

// }

//
const handleLayout = (name: string) => {
    main.layout.name.value = name as IPackAntvX6.LayoutNames;
    if (name == 'self') return;
    main.layout.execute();
}

const handleImport = () => {
    importBtn((s) => {
        try {
            const d = JSON.parse(s)
            // console.log(d);
            main.graph.load(d);
            // 校验画布格式
        } catch (error) {
            console.error(t('file-read-error') + error)
        }
    })
}

const handleExport = () => {
    const name = main.menu.name.value ? `${main.menu.name.value}.json` : `graph-${new Date().toLocaleDateString()}.json`;
    exportBtn(JSON.stringify(main.graph.save()),name)
}

</script>

<template>
    <div v-if="enabled"
        :class="['toolbar absolute right-2 top-2 flex items-center gap-2 backdrop-blur-md p-2 rd-1 shadow-md text-6 z-100', isFold ? 'is-fold' : '']" @click.stop=""  >
        <!-- 是否自动折叠工具条 -->
        <div :class="['i-ri:sidebar-fold-fill w-1em h-1em _btn', isFold ? '' : 'rotate-180deg']"
            @click="isFold = !isFold" :title="t(isFold ? 'toolbar-title-expand' : 'toolbar-title-fold')"></div>
        <!-- 导入 导出 -->
        <div v-if="module.import" class="i-lets-icons:arhive-import w-1em h-1em _btn" :title="t('toolbar-title-import')" @click="handleImport">
        </div>
        <div v-if="module.export" class="i-lets-icons:arhive-export w-1em h-1em _btn" :title="t('toolbar-title-export')" @click="handleExport">
        </div>
        <!-- 放大 -->
        <div v-if="module.zoom" class="i-icon-park-outline:zoom-in w-1em h-1em _btn" :title="t('toolbar-title-zoomin')"
            @click="() => main.graph.scaleTo('+')">
        </div>
        <div>{{main.graph.config.scale}}</div>
        <!-- 缩小 -->
        <div v-if="module.zoom" class="i-icon-park-outline:zoom-out w-1em h-1em _btn" :title="t('toolbar-title-zoomout')"
            @click="() => main.graph.scaleTo('-')">
        </div>
        <!-- 自动缩放 -->
        <div v-if="module.scale" class="i-material-symbols:fit-screen w-1em h-1em _btn" :title="t('toolbar-title-fit')"
            @click="() => main.graph.scaleTo('=')"></div>
        <!-- 全屏/恢复 -->
        <div v-if="module.full">
            <div class="i-fluent:full-screen-maximize-24-filled w-1em h-1em _btn" v-if="!main.graph.isFull.value"
                @click="main.graph.toggleFull" :title="t('toolbar-title-full')" ></div>
            <div class="i-fluent:full-screen-minimize-16-filled w-1em h-1em _btn" v-else @click="main.graph.toggleFull" :title="t('toolbar-title-unfull')">
            </div>
        </div>

        <!-- 线形 -->
        <div v-if="module.edge" class="relative suspend">
            <div :class="[DICT_EDGES[c.edge].icon, 'w-.8em h-1em _btn is-active']"></div>
            <div class="absolute top-100% m-t-4 suspend-item flex flex-col gap-2 p-2 rd-1 bg-#fff shadow-md">
                <template v-for="(item,i) in DICT_EDGES">
                    <div :class="['w-.8em h-.8em _btn',item.icon]" :title="item.desc" @click="() => handleEdgeChange(i)"></div>
                </template>
            </div>
        </div>
        <!-- 布局 -->
        <div v-if="module.layout" class="relative suspend">
            <div :class="[main.layout.icons[main.layout.name.value], 'w-.9em h-1em _btn is-active']"></div>
            <div class="absolute top-100% m-t-4 suspend-item flex flex-col gap-2 p-2 rd-1 bg-#fff shadow-md">
                <template v-for="item in DICT_LAYOUT">
                    <div :class="['w-1em h-1em _btn',item.icon]" :title="item.desc" @click="handleLayout(item.name)" ></div>
                </template>
            </div>
        </div>
        <!-- 小地图 -->
        <div v-if="module.map" :class="['i-bx:map w-1em h-1em _btn', minimap ? 'is-active' : '']" :title="t('toolbar-map-title')"
            @click="minimap = !minimap">
        </div>
        <!-- 功能开关集合 -->
        <div v-if="module.switch" class="relative suspend">
            <div class="i-ph:power-duotone w-1em h-1em _btn" :title="t('toolbar-switch-title')"></div>
            <div class="absolute top-100% m-t-4 suspend-item flex flex-col gap-2 p-2 rd-1 bg-#fff shadow-md">
                <!-- 顶栏 -->
                <div :class="['i-system-uicons:circle-menu w-1em h-1em _btn', menu ? 'is-active' : '']"
                    @click="menu = !menu"  :title="t('toolbar-switch-menu')"></div>
                <!-- 节点列表 -->
                <div :class="['i-material-symbols-light:list-alt-outline w-1em h-1em _btn', nodelist ? 'is-active' : '']"
                    @click="nodelist = !nodelist"  :title="t('toolbar-switch-nodelist')"></div>
                <!-- 抽屉 -->
                <div :class="['i-icomoon-free:drawer w-1em h-1em _btn', drawer ? 'is-active' : '']"
                    @click="drawer = !drawer"  :title="t('toolbar-switch-drawer')"></div>
                <!-- 右键菜单 -->
                <div :class="['i-iconamoon:menu-kebab-vertical-square-light w-1em h-1em _btn', contextmenu ? 'is-active' : '']"
                    @click="contextmenu = !contextmenu"  :title="t('toolbar-switch-contextmenu')"></div>
                <!-- 坐标测试 -->
                <div :class="['i-iconoir:position w-1em h-1em _btn', mousepos ? 'is-active' : '']"
                    @click="main.mousepos.toggle" :title="t('toolbar-switch-mousepos')"></div>
            </div>
        </div>
        <!-- 搜索 -->
        <div v-if="module.search" class="relative search-box">
            <div class="i-mingcute:search-3-line w-1em h-1em _btn"></div>
            <div class="search-panel absolute top-100% m-t-4 gap-2 flex flex-col p-y-2 rd-1 bg-#fff shadow-md w-60">
                <div class="flex items-center gap-2 p-x-2 text-4">
                    <div class="i-mingcute:search-3-line w-1em h-1em"></div>
                    <input class="search-input b-none shadow-none" :placeholder="t('toolbar-search-placeholder')" @input="handleSearch"
                        clearable />
                </div>
                <div class="h-1px bg-#ddd m-y-.5"></div>
                <div class="max-h-75 h-75 flex flex-col">
                    <!-- <div class="flex items-center text-12 ">
                        <input type="radio" name="type" id="all" value="0" checked />
                        <label for="all" class="m-r-8">全部</label>
                        <input type="radio" name="type" id="node" value="1" />
                        <label for="node" class="m-r-8">节点</label>
                        <input type="radio" name="type" id="edge" value="2" />
                        <label for="edge">边</label>
                    </div>
                    <div class="h-1 bg-#ddd m-y-1"></div>
                    <div class="h-1 bg-#ddd m-y-2"></div> -->
                    <div class="w-full flex flex-col flex-1 gap-2 text-3.5 overflow-auto p-2 scrollbar-thin">
                        <div v-for="item in searchResults" :key="item.id" @click="() => handleCenterCell(item.id)"
                            class="bg-#f8f8f8 box-border p-2 rd-1 cursor-pointer flex flex-nowrap gap-2 hover-c-#409EFF hover-shadow-md">
                            <div v-if="item.icon" :class="[item.icon, '']"></div>
                            <div class="flex-1 overflow-hidden lh-1em">
                                <div class="truncate">{{ item.label }}</div>
                                <!-- <div class="text-8 c-#aaa truncate" >{{ item.id }}</div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.toolbar {
    transition: transform .5s ease;

    &.is-fold {
        /* right:0; */
        transform: translateX(100%);
        margin-right: 24px;
    }

    ._btn {
        cursor: pointer;

        &:hover {
            color: cadetblue;
        }

        &.is-active {
            color: #409EFF;
        }
    }

    .search-box {

        &:hover,
        &:has(:focus) {
            >.search-panel {
                opacity: 1;
                transform: scaleY(1);
            }
        }

        >.search-panel {
            opacity: 0;
            transition: all .5s ease-in-out;
            transform: scaleY(0);
            right: -8px;
            transform-origin: 50% 0;
        }
    }
}
</style>